<%--
  Created by IntelliJ IDEA.
  User: 陈海彬
  Date: 2023/9/25
  Time: 19:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>平调信息</title>
    <link rel="stylesheet" href="../../static/css/element-ui.css">
    <script src="../../static/js/vue.js"></script>
    <script src="../../static/js/axios.min.js"></script>
    <script src="../../static/js/element_index.js"></script>
</head>
<body>
<div id="app">
    <%--模糊查询下拉框--%>
    <el-form :inline="true" :model="searchForm">
        <el-form-item label="分店信息">
            <el-select v-model="searchForm.branchid" placeholder="请选择要查询的分店">
                <el-option v-for="item in branchInfoList" :key="item.branchid" :label="item.branchname"
                           :value="item.branchid"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="success" @click="initOutLibrayTransfer(1)" icon="el-icon-search">查询</el-button>
        </el-form-item>
    </el-form>
    <div v-if="outLibrayTotal>0" class="container">
        <%--表格组件--%>
        <el-table
                :data="outLibrayList"
                :cell-style="{'text-align':'center'}"
                :header-cell-style="{'text-align':'center'}"
                border
                style="width: 100%">
            <el-table-column fixed prop="cid" label="出库编号" show-overflow-tooltip width="90"></el-table-column>
            <el-table-column prop="checkoutPerson" label="出库人" show-overflow-tooltip width="90"></el-table-column>
            <el-table-column prop="outLibrayTransfer.outtime" label="出库时间" show-overflow-tooltip
                             width="200"></el-table-column>
            <el-table-column prop="reviewerPerson" label="审核人" show-overflow-tooltip width="90"></el-table-column>
            <el-table-column prop="outLibrayTransfer.examtime" label="审核时间" show-overflow-tooltip
                             width="200"></el-table-column>
            <el-table-column label="出库方式" width="100">
                <template slot-scope="scope">
                    <el-tag hit type="warning" effect="dark">{{ scope.row.outLibrayTransfer.outmethod == 3?'平调出库':''
                        }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="审核状态" width="100">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.outLibrayTransfer.examstate ==
                    1?'warning':scope.row.outLibrayTransfer.examstate == 2?'success':'danger'" effect="dark">{{
                        scope.row.outLibrayTransfer.examstate ==
                        1?'待审核':scope.row.outLibrayTransfer.examstate == 2?'审核通过':'审核驳回' }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="branchName" label="原始分店" show-overflow-tooltip width="140"></el-table-column>
            <el-table-column prop="newBranchName" label="平调分店" show-overflow-tooltip width="140"></el-table-column>
            <el-table-column prop="outLibrayTransfer.remarks" show-overflow-tooltip label="驳回理由"
                             width="180"></el-table-column>
            <el-table-column label="操作" fixed="right" width="140">
                <template slot-scope="scope">
                    <el-button @click="getDetailsByCid(scope.row.cid)" size="medium" type="primary">详细信息</el-button>
                </template>
            </el-table-column>
        </el-table>
        <%--分页组件--%>
        <el-pagination
                @size-change="outLibraySizeChange"
                @current-change="outLibrayCurrentChange"
                :current-page="outLibrayPage"
                :page-sizes="[5, 10, 15,20]"
                :page-size="outLibrayPageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="outLibrayTotal">
        </el-pagination>
    </div>
    <el-empty v-else description="该门店暂无数据"></el-empty>

    <%--详细信息弹出层--%>
    <el-dialog
            title="详细信息"
            :visible.sync="detailsVisible"
            width="80%">
        <el-table
                :cell-style="{'text-align':'center'}"
                :header-cell-style="{'text-align':'center'}"
                :data="detailList"
                stripe
                style="width: 100%">
            <el-table-column prop="xid" show-overflow-tooltip label="出库详情ID"></el-table-column>
            <el-table-column prop="goods.goodsname" show-overflow-tooltip label="商品名"></el-table-column>
            <el-table-column prop="num" show-overflow-tooltip label="出库数量"></el-table-column>
            <el-table-column prop="goods.sprice" show-overflow-tooltip label="售价"></el-table-column>
            <el-table-column prop="total" show-overflow-tooltip label="总价"></el-table-column>
        </el-table>
        <el-pagination
                @size-change="detailSizeChange"
                @current-change="detailCurrentChange"
                :current-page="detailPage"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="detailPageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="detailTotal">
        </el-pagination>
    </el-dialog>

</div>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            outLibrayPage: 1,//当前的页数
            outLibrayPageSize: 5,//每页展示最大数
            outLibrayTotal: 0,//总条数
            outLibrayList: [],//表格数据

            /*下拉框数据*/
            searchForm: {
                /*分店id*/
                branchid: undefined
            },//下拉选择框
            branchInfoList: [],//下列选择框数据

            /*详细信息数据*/
            detailPage: 1,
            detailPageSize: 5,
            detailTotal: 0,
            detailList: [],
            detailsVisible: false,//详细信息弹出层
            cid: 0,//详细信息的id

        },
        created() {
            this.initOutLibrayTransfer();
            this.initBranchInfo();
        },
        methods: {
            /*初始化平调信息*/
            initOutLibrayTransfer(val) {
                if (val === 1) {
                    this.outLibrayPage = 1;
                }
                axios.get('/outLibrayTransfer/getAllInfo', {
                    params: {
                        page: this.outLibrayPage,
                        pageSize: this.outLibrayPageSize,
                        branchid: this.searchForm.branchid
                    }
                }).then(res => {
                    this.outLibrayList = res.data.data.rows;
                    this.outLibrayTotal = res.data.data.total;
                })
            },
            /*获取下拉框数据*/
            initBranchInfo() {
                let self = this;
                axios.get('/branch/list').then(res => {
                    self.branchInfoList = res.data.data;
                })
            },
            /*平调信息显示最大值*/
            outLibraySizeChange(val) {
                this.outLibrayPageSize = val;
                this.initOutLibrayTransfer();
            },
            /*平调信息切换当前页*/
            outLibrayCurrentChange(val) {
                this.outLibrayPage = val;
                this.initOutLibrayTransfer();
            },
            /*获取商品详细信息*/
            getDetailsByCid(cid) {
                this.cid = cid;
                this.detailsVisible = true;//修改弹出层状态
                axios.get('/outLibrayTransfer/getDetails', {
                    params: {
                        cid: cid,
                        page: this.detailPage,
                        pageSize: this.detailPageSize,
                    }
                }).then(res => {
                    this.detailList = res.data.data.rows;
                    this.detailTotal = res.data.data.total;
                })
            },
            /*商品详细信息最大数*/
            detailSizeChange(val) {
                this.detailPageSize = val;
                this.getDetailsByCid(this.cid);
            },
            detailCurrentChange(val) {
                this.detailPage = val;
                this.getDetailsByCid(this.cid);
            }
        }
    })
</script>
</body>
</html>
